<template>
  <div class="app">
    <div class="btnbox">
      <div class="backbtn" @click="backlink()">
        <van-icon name="arrow-left" class="svgicon" />
      </div>
      <div style="display: flex; align-items: center">
        <div class="share">
          <icon-svg
            icon-class="share"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
      </div>
    </div>
    <div class="imgbox">
      <img :src="goodsinfo.image" alt="" />
    </div>
    <div class="goodsbox1">
      <div class="numbers">
        <div class="mgoodprice">￥{{ goodsinfo.price }}/{{ goodsinfo.unit }}</div>
        <div class="mgoodnum">剩余:{{ goodsinfo.number }}</div>
      </div>
      <div class="mgoodname">{{ goodsinfo.name }}</div>
      <van-text-ellipsis
        class="mgooddescription"
        :content="goodsinfo.describe"
        expand-text="展开"
        collapse-text="收起"
      />
    </div>
    <div class="goodsbox2">
      <div class="goodsbox2line1">
        <van-cell title="商品详情" is-link />
      </div>
      <div class="goodsbox2line2">
        <div class="goodsbox2title">保障</div>
        <div class="goodsbox2text">七天无理由退换货</div>
      </div>
      <div class="goodsbox2line2">
        <div class="goodsbox2title">物流</div>
        <div class="goodsbox2text">48小时内发货</div>
      </div>
    </div>
    <div class="pingjiabox">
      <div class="pingjialine1">
        <div style="font-size: 16px">商品评价</div>
        <div style="font-size: 14px; color: gray">
          全部<van-icon name="arrow" />
        </div>
      </div>
      <div class="pingjiacontainer">
        <div class="pingjiabox1">
          <div class="userinfo">
            <van-image
              width="28px"
              height="28px"
              fit="cover"
              :src="goodspingjia.avatar"
              class="avatar"
            />
            <div class="nickname">
              {{ goodspingjia.nickname }}
            </div>
          </div>
          <van-text-ellipsis
            rows="2"
            :content="goodspingjia.pingjiacontent"
            expand-text="展开"
            collapse-text="收起"
            class="pingjiacontent"
          />
        </div>
        <div
          v-if="goodspingjia.pingjiaimages.length > 0"
          style="margin-left: 15px"
        >
          <van-image
            width="60px"
            height="60px"
            fit="cover"
            :src="goodspingjia.pingjiaimages[0]"
            class="pingjiaimages"
          />
        </div>
      </div>
    </div>
    <div class="goodsdetailbox">
      <div style="font-size: 16px">商品详情</div>
    </div>
    <div class="bottombox">
      <div class="icons">
        <div class="iconbox">
          <icon-svg
            icon-class="goods_kefu"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
          <div style="font-size: 13px">客服</div>
        </div>
        <div class="iconbox">
          <icon-svg
            icon-class="goods_collect"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
          <div style="font-size: 13px">收藏</div>
        </div>
      </div>
      <div class="btns">
        <van-button type="warning" @click="addChart">加入购物车</van-button>
        <van-button type="primary">立即购买</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { updatechart } from "@/http/request.js";
export default {
  data() {
    return {
      goodsinfo: {},
      goodspingjia: {
        avatar: require("../../assets/images/zhujiao1.png"),
        nickname: "昵称xxx",
        pingjiacontent:
          "很好的产品，very good，测试数据测试数据测试数据测试数据",
        pingjiaimages: [require("../../assets/images/club2.jpg")],
      },
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    addChart(){
      
    },
  },
  created() {
    this.goodsinfo = JSON.parse(this.$route.params.goodsinfo);
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  background-color: #f2f3f5;
  min-height: 100vh;
}
.btnbox {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2; /* 将 z-index 调整为 2，确保在上面一层 */
  position: relative; /* 添加 position: relative，以便子元素使用 z-index */
}
.backbtn {
  width: 28px;
  height: 28px;
  background-color: #837e7da1;
  padding: 5px;
  margin-left: 10px;
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
}
.share {
  width: 28px;
  height: 28px;
  background-color: #837e7da1;
  margin-left: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.svgicon {
  font-size: 30px;
  color: white;
}
.share-icon {
  width: 25px;
  height: 25px;
}
.imgbox {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-top: -50px;
  position: relative;
}
.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.goodsbox1 {
  width: 95%;
  box-sizing: border-box;
  margin: -20px auto 10px auto;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  z-index: 5;
  position: relative;
  box-shadow: 2px -5px 8px rgba(0, 0, 0, 0.1);
}
.numbers {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.mgoodprice {
  font-size: 20px;
  color: #f96d49;
}
.mgoodnum {
  font-size: 15px;
}
.mgoodname {
  font-size: 20px;
}
.mgooddescription {
  font-size: 14px;
  width: 100%;
  color: gray;
  white-space: normal; /* 允许内容根据需要换行 */
  overflow-wrap: break-word; /* 在必要时断字 */
  word-break: keep-all; /* 在中英文混合时，尽量避免在中文字符间断行 */
}
.goodsbox2 {
  width: 95%;
  box-sizing: border-box;
  margin: 10px auto 10px auto;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  z-index: 5;
  position: relative;
}
.goodsbox2line1 {
  display: flex;
  widows: 100%;
  justify-content: space-between;
  align-items: center;
}

.pingjiabox {
  width: 95%;
  box-sizing: border-box;
  margin: 10px auto 10px auto;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
}
.pingjialine1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.goodsbox2line2 {
  display: flex;
  width: 100%;
  align-items: flex-end;
  margin-top: 5px;
}
.goodsbox2title {
  font-size: 16px;
}
.goodsbox2text {
  font-size: 14px;
  color: gray;
  margin-left: 15px;
}
.pingjiacontainer {
  display: flex;
  width: 100%;
  min-height: 60px;
  margin-top: 5px;
}
.pingjiabox1 {
  display: flex;
  min-height: 60px;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}
.userinfo {
  display: flex;
  height: 35px;
  align-items: center;
}
.userinfo .avatar {
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
}
.nickname {
  font-size: 16px;
  margin-left: 5px;
}
.pingjiacontent {
  margin-top: 3px;
  font-size: 14px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}
.goodsdetailbox {
  width: 95%;
  box-sizing: border-box;
  margin: 10px auto 10px auto;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
}
.bottombox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: white;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icons {
  display: flex;
  align-items: center;
}
.iconbox {
  height: 100%;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.share-icon {
  width: 22px;
  height: 22px;
}
.btns {
  display: flex;
  flex-grow: 1;
}
.btns .van-button {
  border-radius: 20px;
  height: 40px;
  width: 50%;
  margin: 0 0 0 10px;
}
</style>
<style>
.goodsbox2line1 .van-cell {
  padding: 0 !important;
}
.pingjiaimages .van-image__img {
  border-radius: 5px;
}
</style>